<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import { UserFilled } from '@element-plus/icons-vue'
import { list } from '@/data-js/home-meua/index.js'
const route = useRoute()
const router = useRouter()
const user = ref({
    username: ''
})
const loginState = ref(false)
</script>

<template>
    <div class="contain">
        <div class="meua-list">
            <ul>
                <router-link v-for="(u, i) in list" :to="u.route">
                    <li :class="route.fullPath.indexOf(u.route) !== -1 ? 'active-meua meua' : 'meua'" v-noselect>
                        <div class="item">
                            <div><i :class="`iconfont icon_meua ${u.icon}`"></i></div>
                            <div>{{ u.label }}</div></div>
                        <div>></div>
                    </li>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="less">
@user-heigth: 50px;

@top-margin: 10px;
.item{
    display: flex;
    .icon_meua{
        margin-right: 20px;
        font-size: 16px;
    }
}
.meua {
    margin-top: 10px;
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 20px 10px;
    color:black;
    font-size: 14px;
    transition: all 0.5s;
}
a{
    text-decoration: none;
}

.active-meua {
    background-color: rgb(61,125,252);
    color: white;
}

.contain {
    width: 100%;
    height: 100%;
}

.el-menu-vertical-demo {
    border: none !important;
}

.meua-list {
    width: 100%;
    height: calc(100vh - @user-heigth - @top-margin - 60px);
}

.user {
    margin-top: @top-margin;
    height: @user-heigth;
    justify-content: center;
}

.user-msg {
    font-weight: 10000;
    font-size: 20px;
    text-align: center;
    display: flex;
    align-items: center;
}

.avatar {
    align-items: center;
}
</style>